<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>费用统计</title>
    <link rel="stylesheet" href="../../lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui/lay/dest/layui.all.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/highcharts.js"></script>

    <style>
        * {font-family: "Microsoft Yahei" !important;}
        nav button{
            margin-left: 5px;
            padding: .25rem .5rem;
            font-size: .875rem;
            border-radius: .2rem;
            margin-top: 10px;
        }
        nav div{
            float: right !important;
            margin: 15px;
        }
        nav{
            height: 50px;
            border-bottom: 1px solid #cfdbe2;
            background-color: #fafbfc;
            border-radius: 0;
        }
        .layui-tab{
            margin:0;
        }
        .content{
            height: 544px;
            overflow: auto;
            margin: 14px;
            padding: 14px;
            background: #fff;
        }
        .layui-tab-content{
            background-color: #F5F7FA;
        }
        .search{
            display: inline;
            margin-bottom: 1px;
            width: 185px;
            border: 0;
            background: #fafbfc;
        }
        .allBtn{
            float: left !important;
            margin-top: 10px;
            width: 70px;
            margin-left: 27px;
            border: none;
            background: #fafbfc;
        }
        .screen{
            float: left !important;
            margin-top: 10px;
            width: 70px;
            margin-left: 27px;
            border-radius: 5px;
            color: black;
            border-color: #03a9f4;
            background: #fafbfc;
            border: none;
        }
        .one{
            border: 1px solid #03a9f4;
            border-radius: 5px;
            color: #03a9f4;
            border-color: #03a9f4;
            background: #fafbfc;
        }
        div .layui-input-inline{
            padding-left: 25px;
        }

    </style>
</head>
<body>
<form class="layui-form">
    <nav>
        <button type="button" setType="2" id="setType" class="layui-btn layui-btn-primary layui-btn-sm allBtn one classBtn">部门</button>
        <button type="button" setType="3" id="setTypes" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">用户</button>
        <%--<button type="button" setType="3" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">公司</button>--%>
        <%--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm screen  classBtn">项目</button>--%>
        <%--<div style="display: inline-block;border-bottom: 1px solid #ccc;margin-top: 4px;margin-left: 50px;">--%>
            <%--<input type="text" class="search" placeholder="搜索部门"/>--%>
            <%--<span style="padding: 5px;color: #999;cursor: pointer;">--%>
                <%--<i class="layui-icon layui-icon-group"></i>--%>
            <%--</span>--%>
        <%--</div>--%>

        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="float: right;margin-right: 25px" >导出</button>
    </nav>
    <div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" >
            <div class="layui-tab-content" >
                <div  id="costd" >
                    <table class="layui-hide" id="cost" lay-filter="test"></table>
                </div>
                <div  style="display: none;" id="costds">
                    <table class="layui-hide" id="costs" lay-filter="tests"></table>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="sectionDel">
        <a class="layui-btn  layui-btn-xs" lay-event="all">查看明细</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="alls">所有明细</a>
    </script>
</form>
</body>
<script>
    var inventoryId;
    var types;
    var paymentDateSta;
    var paymentDateEnd;
    var settingId;
    $('.content').height($(document.body).height()-50);
    $('.classBtn').click(function () {
        var index = $('.classBtn').index(this);
        if(index==0){
            $('.search').parent().show();
            $('.search').attr('placeholder','搜索部门').siblings().children().attr('class','layui-icon layui-icon-group');
        }else if(index==1){
            $('.search').parent().show();
            $('.search').attr('placeholder','搜索用户').siblings().children().attr('class','layui-icon layui-icon-friends');
        }else if(index==2){
            $('.search').parent().hide();
        }else if(index==3){
            $('.search').parent().show();
            $('.search').attr('placeholder','选择项目').siblings().children().attr('class','layui-icon layui-icon-tabs');
        }
        $('.content:eq("'+index+'")').css('display','block').siblings('.content').css('display','none');
        $(this).toggleClass("one");
        $(this).siblings('button').removeClass("one");

    });

    layui.use(['form', 'layedit', 'laydate','layedit','table','element'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,table = layui.table
            ,element = layui.element;
        form.render();
        layedit.build('texPart'); //建立编辑器

        //日期
        laydate.render({
            elem: '#date'
        });
        var tableInt = table.render({
            elem: '#cost'
            ,url:'/chargeList/chargeStatistical?type=2'
            ,page: true //开启分页
            ,limit: 10
            ,cols: [[
                {field:'DEPT_NAME', title:'部门名称'}
                ,{field:'alertMethod', title: '预警方式',templet:function(d){
                        if(d.alertMethod==1){
                            return '年'
                        }else if(d.alertMethod==2){
                            return '季度'
                        }else if(d.alertMethod==3){
                            return '月'
                        }else if(d.alertMethod==4){
                            return '自定义周期'
                        }else if(d.alertMethod==undefined){
                            return ''
                        }
                    }}
                ,{field:'alertType',  title: '预警金额',templet:function(d){
                        if(d.alertType==1){
                            return '总值'
                        }else if(d.alertType==2){
                            return '各科目值'
                        }else if(d.alertType==undefined){
                            return ''
                        }
                    }}
                ,{field:'createdTime', title: '预警期'}
                ,{field:'Reimbursed', title: '已报销'}
                ,{field:'remaining', title: '剩余报销'}
                ,{field:'total', title: '总计报销'}
                , {title: '操作', align: 'center', toolbar: '#sectionDel'}
            ]]
            ,response: {
                statusName: 'flag',  //规定数据状态的字段名称，默认：code
                statusCode: true,   //规定成功的状态码，默认：0
                dataName: 'obj',    //规定数据列表的字段名称，默认：data
                countName: 'totleNum'
            }
        });

        var tableInts = table.render({
            elem: '#costs'
            ,url:'/chargeList/chargeStatistical?type=3'
            ,page: true //开启分页
            ,limit: 10
            ,cols: [[
                {field:'USER_NAME', title:'用户名'}
                ,{field:'alertMethod', title: '预警方式',templet:function(d){
                        if(d.alertMethod==1){
                            return '年'
                        }else if(d.alertMethod==2){
                            return '季度'
                        }else if(d.alertMethod==3){
                            return '月'
                        }else if(d.alertMethod==4){
                            return '自定义周期'
                        }else if(d.alertMethod==undefined){
                            return ''
                        }
                    }}
                ,{field:'alertType',  title: '预警金额',templet:function(d){
                        if(d.alertType==1){
                            return '总值'
                        }else if(d.alertType==2){
                            return '各科目值'
                        }else if(d.alertType==null){
                            return ''
                        }
                    }}
                ,{field:'createdTime', title: '预警期'}
                ,{field:'Reimbursed', title: '已报销'}
                ,{field:'remaining', title: '剩余报销'}
                ,{field:'total', title: '总计报销'}
                , {title: '操作', align: 'center', toolbar: '#sectionDel'}
            ]]
            ,response: {
                statusName: 'flag',  //规定数据状态的字段名称，默认：code
                statusCode: true,   //规定成功的状态码，默认：0
                dataName: 'obj',    //规定数据列表的字段名称，默认：data
                countName: 'totleNum'
            }
        });

        //监听工具条
        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            inventoryId = data.DEPT_ID   //获取当前行的id

            types=2
            if(data.settingId){
                settingId = data.settingId
            }else {
                settingId =''
            }
            if(data.alertMethod==2){
                paymentDateSta= data.monthStart
                paymentDateEnd= data.monthEnd
            }
            if(data.alertMethod != 2){
                if(data.createdTime){
                    paymentDateSta= data.createdTime
                    paymentDateEnd= data.createdTime
                }else {
                    paymentDateSta=''
                    paymentDateEnd=''
                }

            }

            // paymentDateEnd= data.DEPT_ID
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'all') {
                window.open("/charge/statisticsLists")
            } else if (layEvent === 'alls') {
                window.open("/charge/statisticsList")
            }
        });
        table.on('tool(tests)', function (obj) {
            var data = obj.data; //获得当前行数据
            inventoryId = data.USER_ID   //获取当前行的id
            types=3
            if(data.settingId){
                settingId = data.settingId
            }else {
                settingId =''
            }
            if(data.alertMethod==2){
                paymentDateSta= data.monthStart
                paymentDateEnd= data.monthEnd
            }
            if(data.alertMethod != 2){
                if(data.createdTime){
                    paymentDateSta= data.createdTime
                    paymentDateEnd= data.createdTime
                }else {
                    paymentDateSta=''
                    paymentDateEnd=''
                }

            }
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'all') {
                window.open("/charge/statisticsLists")
            } else if (layEvent === 'alls') {
                window.open("/charge/statisticsList")
            }
        });

        $('#setType').click(function () {
            $('#costds').hide();
            $('#costd').show();
        })
        $('#setTypes').click(function () {
            $('#costd').hide();
            $('#costds').show();
        })

    });

</script>

</html>
